/**
 * 波形显示模块
 * 负责处理波形图的显示和标记功能
 */
class WaveformDisplay {
    constructor(containerId, options = {}) {
        // 配置选项
        this.containerId = containerId;
        this.container = document.getElementById(containerId);
        this.waveColor = options.waveColor || '#3498db';
        this.progressColor = options.progressColor || '#2980b9';
        this.cursorColor = options.cursorColor || '#e74c3c';
        this.height = options.height || 150;
        this.minPxPerSec = options.minPxPerSec || 100;
        
        // 条形图相关配置
        this.barWidth = options.barWidth || 4;
        this.barGap = options.barGap || 2;
        this.barAmplitude = options.barAmplitude || 0.9; // 默认条形图高度为90%的画布高度
        this.updateFrameRate = options.updateFrameRate || 3; // 每隔多少帧更新一次波形移动，值越大移动越慢
        this.useGradient = options.useGradient !== undefined ? options.useGradient : true; // 是否使用渐变色
        this.gradientColors = options.gradientColors || ['#1976D2', '#64B5F6', '#4CAF50', '#FFC107', '#FF5722']; // 渐变色数组
        this.amplitudeBasedColor = options.amplitudeBasedColor !== undefined ? options.amplitudeBasedColor : false; // 是否根据振幅设置颜色
        this.gradientDirection = options.gradientDirection || 'horizontal'; // 渐变方向，可选 'horizontal'/'vertical'
        
        // 波形图相关变量
        this.wavesurfer = null;
        this.markers = [];
        this.currentAudioBlob = null;
        this.liveWaveformCanvas = null;
        this.liveWaveformCtx = null;
        this.animationId = null;
        this.waveformHistory = null;
        this.frameCounter = 0;
        
        // 回调函数
        this.onReady = options.onReady || null;
        this.onAudioprocess = options.onAudioprocess || null;
        this.onMarkerAdded = options.onMarkerAdded || null;
        
        // 初始化
        this.init();
    }
    
    /**
     * 初始化波形显示
     */
    init() {
        // 创建实时波形图canvas
        this.liveWaveformCanvas = document.createElement('canvas');
        this.liveWaveformCanvas.width = this.container.clientWidth;
        this.liveWaveformCanvas.height = this.height;
        this.liveWaveformCanvas.style.display = 'block';
        this.liveWaveformCanvas.style.width = '100%';
        this.liveWaveformCanvas.style.height = '100%';
        this.liveWaveformCtx = this.liveWaveformCanvas.getContext('2d');
        
        // 清除容器内容
        this.container.innerHTML = '';
        this.container.appendChild(this.liveWaveformCanvas);
        
        // 初始化WaveSurfer (用于录音完成后显示)
        this.wavesurfer = WaveSurfer.create({
            container: `#${this.containerId}`,
            waveColor: this.waveColor,
            progressColor: this.progressColor,
            cursorColor: this.cursorColor,
            height: this.height,
            barWidth: 2,
            barGap: 1,
            responsive: true,
            normalize: true,
            partialRender: true,
            scrollParent: true,
            minPxPerSec: this.minPxPerSec
        });
        
        this.wavesurfer.on('ready', () => {
            // 如果有准备好回调，则调用
            if (this.onReady) {
                this.onReady(this.wavesurfer.getDuration());
            }
            
            // 添加起始标记
            if (this.markers.length === 0) {
                this.addMarker(0, '开始');
            }
            
            // 显示WaveSurfer，隐藏canvas
            this.liveWaveformCanvas.style.display = 'none';
        });
        
        this.wavesurfer.on('audioprocess', () => {
            // 如果有音频处理回调，则调用
            if (this.onAudioprocess) {
                this.onAudioprocess(this.wavesurfer.getCurrentTime());
            }
        });
        
        // 禁用默认的拖动行为
        this.wavesurfer.on('drag', (e) => {
            e.preventDefault();
            return false;
        });
        
        // 初始显示canvas
        this.liveWaveformCanvas.style.display = 'block';
        
        // 初始化canvas背景
        this.liveWaveformCtx.fillStyle = '#f9f9f9';
        this.liveWaveformCtx.fillRect(0, 0, this.liveWaveformCanvas.width, this.liveWaveformCanvas.height);
    }
    
    /**
     * 添加标记
     * @param {number} position 标记位置（秒）
     * @param {string} label 标记标签
     * @param {string} speed 速度标签
     * @returns {Object} 标记对象
     */
    addMarker(position, label, speed = '正常') {
        if (!this.wavesurfer) return null;
        
        const marker = {
            startTime: position,     // 开始时间
            endTime: null,           // 结束时间（将在下一个标记时更新）
            duration: null,          // 持续时间（将在下一个标记时更新）
            label: label,            // 标记标签
            speed: speed             // 当前速度
        };
        
        this.markers.push(marker);
        
        // 如果有标记添加回调，则调用
        if (this.onMarkerAdded) {
            this.onMarkerAdded(marker);
        }
        
        return marker;
    }
    
    /**
     * 更新最后一个标记的结束时间
     * @param {number} time 结束时间（秒）
     * @returns {Object} 更新后的标记对象
     */
    updateLastMarkerEndTime(time) {
        if (this.markers.length === 0) {
            console.warn('没有标记可以更新');
            return null;
        }
        
        const lastMarker = this.markers[this.markers.length - 1];
        
        // 验证时间值
        if (typeof time !== 'number' || isNaN(time)) {
            console.warn(`无效的时间值: ${time}，使用当前时间`);
            time = this.wavesurfer ? this.wavesurfer.getCurrentTime() : 0;
        }
        
        // 确保时间值大于开始时间
        if (time <= lastMarker.startTime) {
            console.warn(`结束时间 (${time}) 不能小于等于开始时间 (${lastMarker.startTime})，自动调整`);
            time = lastMarker.startTime + 0.5; // 添加0.5秒
        }
        
        lastMarker.endTime = time;
        
        // 如果波形图已加载，更新标记
        if (this.wavesurfer) {
            // 更新视觉标记（如果有必要）
        }
        
        return lastMarker;
    }
    
    /**
     * 移除最后一个标记
     * @returns {Object} 移除的标记对象
     */
    removeLastMarker() {
        if (this.markers.length <= 1) return null;
        
        return this.markers.pop();
    }
    
    /**
     * 清除所有标记
     */
    clearMarkers() {
        this.markers = [];
    }
    
    /**
     * 获取所有标记
     * @returns {Array} 标记数组
     */
    getMarkers() {
        return this.markers;
    }
    
    /**
     * 获取处理后的标记（过滤掉不完整的标记）
     * @returns {Array} 处理后的标记数组
     */
    getProcessedMarkers() {
        return this.markers.filter(marker => 
            marker.startTime !== undefined && 
            marker.endTime !== undefined && 
            marker.duration !== undefined
        );
    }
    
    /**
     * 加载音频
     * @param {Blob} audioBlob 音频Blob对象
     */
    loadAudio(audioBlob) {
        if (!this.wavesurfer) return;
        
        // 确保设置currentAudioBlob
        this.currentAudioBlob = audioBlob;
        
        const audioUrl = URL.createObjectURL(audioBlob);
        
        // 隐藏canvas，准备显示WaveSurfer
        this.liveWaveformCanvas.style.display = 'none';
        
        // 加载音频到WaveSurfer
        this.wavesurfer.load(audioUrl);
    }
    
    /**
     * 清空波形图
     */
    empty() {
        if (this.wavesurfer) {
            this.wavesurfer.empty();
        }
        
        // 重置波形历史数据
        this.waveformHistory = null;
        this.frameCounter = 0;
        
        // 显示canvas
        this.liveWaveformCanvas.style.display = 'block';
    }
    
    /**
     * 绘制实时波形
     * @param {Uint8Array} dataArray 音频数据
     * @param {number} recordingDuration 录音持续时间（秒）
     */
    drawLiveWaveform(dataArray, recordingDuration) {
        // 清除画布
        this.liveWaveformCtx.fillStyle = '#f9f9f9';
        this.liveWaveformCtx.fillRect(0, 0, this.liveWaveformCanvas.width, this.liveWaveformCanvas.height);
        
        // 修改为条形图波形
        const canvasWidth = this.liveWaveformCanvas.width;
        const canvasHeight = this.liveWaveformCanvas.height;
        const centerY = canvasHeight / 2;
        
        // 每个条的宽度和间距
        const totalBars = Math.floor(canvasWidth / (this.barWidth + this.barGap));
        
        // 保存历史数据（如果不存在则初始化）
        if (!this.waveformHistory) {
            this.waveformHistory = new Array(totalBars).fill(0);
        }
        
        // 计算当前帧的振幅
        // 使用RMS（均方根）方法计算音量，效果更好
        let sumOfSquares = 0;
        for (let i = 0; i < dataArray.length; i++) {
            const amplitude = (dataArray[i] / 128.0) - 1;
            sumOfSquares += amplitude * amplitude;
        }
        const rms = Math.sqrt(sumOfSquares / dataArray.length);
        
        // 应用一些非线性缩放，使小音量也能看到
        const scaledAmplitude = Math.min(1, Math.pow(rms * 5, 0.8));
        
        // 减缓波形移动速度 - 只有每N帧才添加新数据
        this.frameCounter++;
        
        if (this.frameCounter >= this.updateFrameRate) { // 每N帧更新一次
            // 将新的振幅数据添加到历史末尾（右侧）
            this.waveformHistory.push(scaledAmplitude);
            
            // 移除最旧的数据（左侧）
            if (this.waveformHistory.length > totalBars) {
                this.waveformHistory.shift();
            }
            
            this.frameCounter = 0; // 重置帧计数器
        }
        
        // 创建全局渐变（如果不使用基于振幅的颜色）
        if (this.useGradient && !this.amplitudeBasedColor) {
            // 创建渐变对象 - 根据设置的方向创建水平或垂直渐变
            let gradient;
            
            if (this.gradientDirection === 'vertical') {
                // 垂直渐变 - 从上到下
                gradient = this.liveWaveformCtx.createLinearGradient(0, 0, 0, canvasHeight);
            } else {
                // 水平渐变 - 从左到右
                gradient = this.liveWaveformCtx.createLinearGradient(0, 0, canvasWidth, 0);
            }
            
            // 添加渐变色停止点
            const colorCount = this.gradientColors.length;
            for (let i = 0; i < colorCount; i++) {
                gradient.addColorStop(i / (colorCount - 1), this.gradientColors[i]);
            }
            
            this.liveWaveformCtx.fillStyle = gradient;
        } else if (!this.useGradient) {
            // 使用单一颜色
            this.liveWaveformCtx.fillStyle = this.waveColor;
        }
        
        // 绘制波形条
        for (let i = 0; i < this.waveformHistory.length; i++) {
            const amplitude = this.waveformHistory[i];
            
            // 计算条的高度（根据振幅）
            const barHeight = amplitude * canvasHeight * this.barAmplitude;
            
            // 计算x位置
            const x = i * (this.barWidth + this.barGap);
            
            // 如果使用基于振幅的颜色，针对每个条设置不同的填充颜色
            if (this.useGradient && this.amplitudeBasedColor) {
                // 为每个条单独创建渐变
                if (this.gradientDirection === 'vertical') {
                    // 为每个条创建垂直渐变
                    const barGradient = this.liveWaveformCtx.createLinearGradient(
                        x, centerY - barHeight / 2, 
                        x, centerY + barHeight / 2
                    );
                    
                    // 根据振幅选择主要颜色
                    const colorIndex = Math.min(
                        this.gradientColors.length - 1,
                        Math.floor(amplitude * this.gradientColors.length)
                    );
                    
                    // 添加渐变色停止点
                    barGradient.addColorStop(0, this.gradientColors[colorIndex]);
                    
                    // 渐变到下一个颜色或更亮的版本
                    const nextColorIndex = Math.min(colorIndex + 1, this.gradientColors.length - 1);
                    barGradient.addColorStop(1, this.gradientColors[nextColorIndex]);
                    
                    this.liveWaveformCtx.fillStyle = barGradient;
                } else {
                    // 根据振幅选择颜色
                    const colorIndex = Math.min(
                        this.gradientColors.length - 1,
                        Math.floor(amplitude * this.gradientColors.length)
                    );
                    this.liveWaveformCtx.fillStyle = this.gradientColors[colorIndex];
                }
            }
            
            // 绘制条形（从中心向上和向下）
            this.liveWaveformCtx.fillRect(
                x, 
                centerY - barHeight / 2, 
                this.barWidth, 
                barHeight
            );
        }
    }
    
    /**
     * 开始实时波形动画
     * @param {AnalyserNode} analyser 音频分析器节点
     * @param {Function} getRecordingTime 获取当前录音时间的函数
     * @param {Function} onFrame 每帧回调函数
     */
    startLiveWaveform(analyser, getRecordingTime, onFrame) {
        // 重置暂停状态
        this.isPaused = false;
        
        // 检查分析器是否可用
        if (!analyser) {
            console.error('无法启动波形显示：分析器节点不可用');
            return;
        }
        
        // 存储分析器引用以便后续使用
        this.currentAnalyser = analyser;
        
        // 恢复之前暂停的动画
        const wasResumed = this.pauseTime && this.waveformHistory;
        
        const animate = () => {
            if (this.isPaused) {
                // 如果被暂停了，停止动画循环
                return;
            }
            
            // 检查分析器是否仍然可用
            if (!this.currentAnalyser) {
                console.warn('波形动画中断：分析器不再可用');
                this.pauseLiveWaveform();
                return;
            }
            
            try {
                // 获取录音时间
                const recordingDuration = getRecordingTime();
                
                // 初始化数据数组
                const bufferLength = this.currentAnalyser.frequencyBinCount;
                const dataArray = new Uint8Array(bufferLength);
                this.currentAnalyser.getByteTimeDomainData(dataArray);
                
                // 绘制波形
                this.drawLiveWaveform(dataArray, recordingDuration);
                
                // 调用帧回调
                if (onFrame) {
                    onFrame(recordingDuration);
                }
                
                // 继续动画
                this.animationId = requestAnimationFrame(animate);
            } catch (error) {
                console.error('波形动画处理出错:', error);
                this.pauseLiveWaveform();
            }
        };
        
        // 记录动画开始时间
        this.animationStartTime = new Date().getTime();
        
        // 如果是恢复之前的暂停，记录下恢复的时间差
        if (wasResumed) {
            this.resumeTimeOffset = this.animationStartTime - this.pauseTime;
            console.log('恢复波形动画，暂停持续时间:', this.resumeTimeOffset, 'ms');
        }
        
        // 开始动画
        this.animationId = requestAnimationFrame(animate);
    }
    
    /**
     * 停止实时波形动画
     */
    stopLiveWaveform() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
            this.animationId = null;
        }
        
        // 释放分析器引用
        this.currentAnalyser = null;
        
        // 清空波形历史，停止动画时不保留历史数据
        this.waveformHistory = null;
        this.frameCounter = 0;
    }
    
    /**
     * 暂停实时波形动画（不清除波形历史数据）
     */
    pauseLiveWaveform() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
            this.animationId = null;
        }
        
        // 不清除分析器引用，因为暂停后可能恢复使用
        
        // 不清空波形历史，保留当前的显示状态
        
        // 确保在暂停状态下绘制最后一帧波形，防止波形消失
        if (this.liveWaveformCtx && this.waveformHistory) {
            // 重新绘制一次以确保最后帧被保留下来
            this.redrawCurrentWaveform();
        }
        
        // 如果wavesurfer实例存在且正在播放，也暂停它
        if (this.wavesurfer && this.wavesurfer.isPlaying()) {
            this.wavesurfer.pause();
        }
        
        // 设置暂停状态标志
        this.isPaused = true;
        
        // 记录暂停时间点，用于可能的恢复
        this.pauseTime = new Date().getTime();
    }
    
    /**
     * 重绘当前波形状态
     * 在暂停时使用，确保波形显示正确
     */
    redrawCurrentWaveform() {
        // 清除画布
        this.liveWaveformCtx.clearRect(0, 0, this.liveWaveformCanvas.width, this.liveWaveformCanvas.height);
        
        // 使用已有的波形历史数据重新绘制
        const canvasHeight = this.liveWaveformCanvas.height;
        const centerY = canvasHeight / 2;
        
        // 绘制波形条
        this.liveWaveformCtx.fillStyle = this.waveColor;
        
        for (let i = 0; i < this.waveformHistory.length; i++) {
            const amplitude = this.waveformHistory[i];
            const barHeight = amplitude * canvasHeight * this.barAmplitude;
            const x = i * (this.barWidth + this.barGap);
            
            // 绘制条形（从中心向上和向下）
            this.liveWaveformCtx.fillRect(
                x, 
                centerY - barHeight / 2, 
                this.barWidth, 
                barHeight
            );
        }
    }
    
    /**
     * 跳转到指定时间
     * @param {number} time 时间（秒）
     */
    seekTo(time) {
        if (this.wavesurfer && this.wavesurfer.isReady) {
            this.wavesurfer.seekTo(time / this.wavesurfer.getDuration());
        }
    }
    
    /**
     * 获取当前音频Blob对象
     * @returns {Blob} 音频Blob对象
     */
    getCurrentAudioBlob() {
        return this.currentAudioBlob;
    }
    
    /**
     * 添加空白波形条作为标记
     * @param {number} count 添加的空白条数量
     */
    addEmptyBars(count = 2) {
        // 确保waveformHistory已初始化
        if (!this.waveformHistory) {
            const canvasWidth = this.liveWaveformCanvas.width;
            const totalBars = Math.floor(canvasWidth / (this.barWidth + this.barGap));
            this.waveformHistory = new Array(totalBars).fill(0);
        }
        
        // 添加空白波形条（零振幅）
        for (let i = 0; i < count; i++) {
            this.waveformHistory.push(0);
            
            // 如果超出显示范围，移除最左侧的条
            if (this.waveformHistory.length > Math.floor(this.liveWaveformCanvas.width / (this.barWidth + this.barGap))) {
                this.waveformHistory.shift();
            }
        }
    }
    
    /**
     * 回滚波形到指定时间点
     * @param {number} targetTime 目标时间点（秒）
     */
    rollbackWaveform(targetTime) {
        if (!this.waveformHistory) return;
        
        // 标记波形回滚位置
        this.rollbackTime = targetTime;
        
        // 清除当前波形历史数组右侧部分（这部分将被丢弃）
        // 保留数组的三分之二，剩余部分将由新数据填充
        const keepCount = Math.floor(this.waveformHistory.length * 2 / 3);
        if (keepCount > 0) {
            this.waveformHistory = this.waveformHistory.slice(0, keepCount);
        }
        
        // 添加两个空白波形条作为视觉分隔
        for (let i = 0; i < 2; i++) {
            this.waveformHistory.push(0);
        }
    }
}

// 导出WaveformDisplay类
window.WaveformDisplay = WaveformDisplay; 